<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="google-adsense-account" content="ca-pub-3661157653310294">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能平台 - 登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <div class="logo-circle">
                <i class="fas fa-lock"></i>
            </div>
            <h1>欢迎登录</h1>
            <p>请输入您的账号信息以继续访问系统</p>
        </div>
        
        <div class="error-message" id="error-message"></div>
        
        <div class="form-group">
            <label for="username"><i class="fas fa-user"></i> 用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required autocomplete="username">
        </div>
        
        <div class="form-group">
            <label for="password"><i class="fas fa-key"></i> 密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required autocomplete="current-password">
        </div>
        
        <button class="login-button" id="login-button">
            <span class="loading" id="loading"></span>
            <i class="fas fa-sign-in-alt"></i> 登录
        </button>
        
        <div class="login-footer">
            <p>系统由 <span class="highlight">智能平台</span> 提供</p>
            <a href="/" class="back-home">返回首页</a>
        </div>
    </div>

    <div class="animated-bg">
        <div class="animated-shape shape1"></div>
        <div class="animated-shape shape2"></div>
        <div class="animated-shape shape3"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginButton = document.getElementById('login-button');
            const usernameInput = document.getElementById('username');
            const passwordInput = document.getElementById('password');
            const errorMessage = document.getElementById('error-message');
            const loading = document.getElementById('loading');
            
            // 自动聚焦用户名输入框
            usernameInput.focus();
            
            // 登录按钮点击事件
            loginButton.addEventListener('click', handleLogin);
            
            // 回车键登录
            passwordInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    handleLogin();
                }
            });
            
            function handleLogin() {
                // 获取用户输入
                const username = usernameInput.value.trim();
                const password = passwordInput.value.trim();
                
                // 基本验证
                if (!username || !password) {
                    showError('请输入用户名和密码');
                    return;
                }
                
                // 显示加载状态
                setLoading(true);
                
                // 发送登录请求
                fetch('/login_request', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username, password })
                })
                .then(response => response.json())
                .then(data => {
                    setLoading(false);
                    
                    if (data.success) {
                        // 登录成功动画
                        showLoginSuccess();
                        
                        // 延迟后重定向到首页
                        setTimeout(() => {
                            window.location.href = data.redirect || '/';
                        }, 800);
                    } else {
                        // 显示错误信息
                        showError(data.message);
                        passwordInput.value = ''; // 清空密码
                        passwordInput.focus();
                    }
                })
                .catch(error => {
                    setLoading(false);
                    showError('登录请求失败，请稍后再试');
                    console.error('Error:', error);
                });
            }
            
            function showError(message) {
                errorMessage.textContent = message;
                errorMessage.style.display = 'block';
                
                // 添加抖动效果
                loginButton.classList.add('shake');
                setTimeout(() => {
                    loginButton.classList.remove('shake');
                }, 500);
            }
            
            function setLoading(isLoading) {
                if (isLoading) {
                    loading.style.display = 'inline-block';
                    loginButton.disabled = true;
                    loginButton.innerHTML = '<span class="loading" id="loading"></span> 登录中...';
                } else {
                    loading.style.display = 'none';
                    loginButton.disabled = false;
                    loginButton.innerHTML = '<i class="fas fa-sign-in-alt"></i> 登录';
                }
            }
            
            function showLoginSuccess() {
                // 添加成功效果
                loginButton.innerHTML = '<i class="fas fa-check"></i> 登录成功';
                loginButton.classList.add('success');
                document.querySelector('.login-container').classList.add('success-animation');
            }
        });
    </script>
</body>
</html> 